<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>展开评论框示例</title>
    <style>
        /* Toast 容器的默认样式 */
        .toast {
            position: fixed;
            top: -50px;
            /* 初始位置设定在屏幕上方不可见处 */
            left: 50%;
            transform: translateX(-50%);
            /* 确保水平居中 */
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 1000;
            transition: top 0.3s ease;
            /* 添加过渡效果来控制垂直滑动 */
        }

        /* Toast 成功时的样式 */
        .toast.success {
            background-color: #28a745;
            /* 绿色背景表示成功 */
        }

        /* Toast 失败时的样式 */
        .toast.error {
            background-color: #dc3545;
            /* 红色背景表示失败 */
        }

        /* Toast 容器显示时的样式 */
        .toast.show {
            top: 20px;
            /* 显示时的位置 */
        }
    </style>
</head>

<body>
    <script>
        function showToast(message, type = 'default', duration = 3000) {
            // 创建一个新的div元素作为toast容器
            const toastContainer = document.createElement('div');
            toastContainer.classList.add('toast'); // 添加toast类以应用默认样式

            // 根据传入的类型添加成功或失败类
            if (type === 'success') {
                toastContainer.classList.add('success');
            } else if (type === 'error') {
                toastContainer.classList.add('error');
            }

            // 设置toast的内容
            toastContainer.textContent = message;

            // 先将toast添加到DOM中，但此时不可见（因为top为-50px）
            document.body.appendChild(toastContainer);

            // 立即将toast设置为可见（通过添加show类）以触发滑入动画
            setTimeout(() => {
                toastContainer.classList.add('show'); // 添加show类来触发滑入动画
            }, 0); // 使用setTimeout来确保在当前调用栈完成后执行动画（虽然这里延迟为0，但会确保DOM更新后再执行动画）

            // 在指定的持续时间后隐藏toast并移除它
            setTimeout(() => {
                // 先将toast设置为隐藏（通过移除show类），这会触发滑出动画
                toastContainer.classList.remove('show'); // 移除show类来触发滑出动画
                // 给滑出动画一些时间来完成（与CSS中定义的过渡时间相匹配），然后再从DOM中移除元素
                setTimeout(() => {
                    document.body.removeChild(toastContainer); // 从DOM中移除toast元素
                }, 300); // 这里设置的延迟应该与CSS中的过渡时间相匹配或稍长一些以确保动画完成
            }, duration); // duration是toast显示的总时间，包括滑入和停留的时间
        }

        // 使用示例：显示成功和失败消息
        showToast('操作成功!', 'success', 3000); // 显示成功的toast消息，持续3秒后消失
        setTimeout(() => {
            showToast('操作失败!', 'error', 3000); // 在前一个消息消失后显示失败的toast消息，持续3秒后消失
        }, 4000); // 延迟4秒以确保前一个消息已经消失或被移除


    </script>
</body>

</html>